<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>邻阿姨(LAY.COM)-去哪买,超市比价,附近价差排行,邻居互助</title>
    <link rel="stylesheet" type="text/css" href="../js/cube-ui/cube.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/order201907031540.css"/>
</head>
<body>
    <div class="app-shell" id="confirmOrder" v-cloak>
        <div class="confirmOrder-main">
            <div class="confirmOrder-header"><i class="confirmOrder-goback" @click="goback()">返回</i>确认订单</div>

            <div class="confirmOrder-container">
                <div class="confirmOrder-tips">为保证订单准确送达，请确认收货信息</div>

                <div class="confirmOrder-addressBox" v-if="addressData">
                    <div class="confirmOrder-location"></div>
                    <div class="confirmOrder-contactBox">
                        <div>
                            <div class="confirmOrder-contact"><span>{{addressData.receiverName}}（{{addressData.sex === 'MALE' ? '先生' : '女士'}}）</span><span>{{addressData.mobile}}</span></div>
                            <div class="confirmOrder-address">{{addressData.areaName}}{{addressData.smallName}}{{addressData.addressTwo}}</div>
                        </div>
                    </div>
                </div>

                <div class="confirmOrder-payWayBox"><span>商品货到付款</span><span class="confirmOrder-payWay"><span @click="changePayWay">{{payWay}}</span></span></div>

                <template v-if="orderData">
                    <div class="confirmOrder-goodsList" v-for="(order,index) in orderData.shopCars" :key="index">
                        <img :src="order.goodsSkuImage" class="confirmOrder-goodsImg">
                        <div class="confirmOrder-goodsInfo">
                            <h1 class="confirmOrder-goodsName">{{order.goodsName}}</h1>
                            <div class="confirmOrder-goodsMinPrice"><span>最低价：{{order.minPrice}}元</span><span class="confirmOrder-goodsMarket">{{order.minSupermarketName}}</span></div>
                            <div class="confirmOrder-goodsMinPrice"><span>最高价：{{order.maxPrice}}元</span><span class="confirmOrder-goodsMarket">{{order.maxSupermarketName}}</span></div>
                            <div class="confirmOrder-goodsSpread">价差率：{{order.spreadRate}}</div>
                            <span class="confirmOrder-goodsNum">数量：×{{order.quantity}}</span>
                            <span class="confirmOrder-goodsTotalPrice">合计：￥{{order.heJiPrice}}</span>
                        </div>
                    </div>

                    <div class="confirmOrder-orderDetails">
                        <ul>
                            <li class="confirmOrder-orderDetailsList"><span class="confirmOrder-orderDetailsLeft">比价优惠</span><span class="confirmOrder-orderDetailsSave">省{{orderData.offerPrice}}元</span></li>
                            <li class="confirmOrder-orderDetailsList confirmOrder-orderDetailsLine"><span class="confirmOrder-orderDetailsLeft">服务费</span><span class="confirmOrder-orderDetailsRight"><span @click="clickService">{{orderData.serviceFee}}元</span></span></li>
                            <li class="confirmOrder-orderDetailsList confirmOrder-orderDetailsLine"><span class="confirmOrder-orderDetailsLeft">附加费用</span><span class="confirmOrder-orderDetailsRight">{{orderData.additionalFees}}元</span></li>
                            <li class="confirmOrder-orderDetailsList confirmOrder-orderDetailsLine"><span class="confirmOrder-orderDetailsLeft">预计送达时间</span><span class="confirmOrder-orderDetailsRight"><span @click="clickDeliveryTime">{{orderData.deliveryTime}}</span></span></li>
                        </ul>
                    </div>
                </template>

                <div class="confirmOrder-buyerMessage"><span>买家留言：</span><input v-model="buyerMessage" placeholder="（选填）填写您的留言内容" class="confirmOrder-messageInput"></input></div>
            </div>

            <div class="confirmOrder-btnBox" v-if="orderData">
                <div class="confirmOrder-totalBox"><span class="confirmOrder-totalNum">共<i class="confirmOrder-totalNumOrange">{{orderData.totalPipce}}</i>件</span><span>合计：<i class="confirmOrder-totalNumOrange">￥{{orderData.totalPrice}}</i></span></div>
                <cube-button :primary="true" :disabled="isDisabled" class="confirmOrder-btnSumbit" @click="btnSumbit">提交订单</cube-button>
            </div>

            <cube-popup type="my-popup" ref="myPopup">
                <div class="confirmOrder-popupBox">
                    <h2 class="confirmOrder-popupTitle">货到后付款方式</h2>
                    <cube-radio-group v-model="payWay">
                        <cube-radio v-for="(option, index) in options" :key="index" :option="option" position="right">
                            <img :src="option.src" class="confirmOrder-radioImg"/>
                            <span class="confirmOrder-radioLabere">{{option.label}}</span>
                        </cube-radio>
                    </cube-radio-group>
                    <div class="confirmOrder-popupBtnBox"><span class="confirmOrder-popupBtn" @click="closePayWay">确定</span></div>
                </div>
            </cube-popup>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/fetch20190612.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/cube-ui/cube.min.js"></script>
    <script src="js/order201907031540.js"></script>
</body>
</html>
